import { Link, useParams } from "react-router-dom";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Pagination } from "swiper/modules";
import 'swiper/css';
import 'swiper/css/pagination';
import { useSize } from "ahooks";
import { list } from '@/assets/data';
import { useMemo } from "react";
import './index.css'

const GameDetail = () => {
  const { id } = useParams();
  const size = useSize(document.body)
  const data = useMemo(() => list.find((item: any) => item.id === Number(id)), [id])

  return (
    <div className="text-white pt-[130px] sm:pt-[240px] pb-[38px] sm:pb-[160px] bg-no-repeat bg-[length:240%] sm:bg-[length:100%] bg-[center_top] sm:bg-top-left bg-[#141430]" style={{ backgroundImage: `url(${data?.bannerimg})` }}>
      <section className="h-[114px] sm:h-[228px] max-h-[228px] mx-auto flex justify-center mb-[30px] sm:mb-[96px] px-[20px] sm:px-0">
        <div className="w-full sm:w-[1200px] flex items-stretch">
          <img src={data?.logo} className="block aspect-[1/1] mr-[15px] rounded-2xl" alt="" />
          <div className="flex-1 pt-[10px] pb-[5px] flex flex-col">
            <p className="font-[PoppinsBold] uppercase text-[28px] sm:text-[50px] leading-[30px] sm:leading-[56px] sm:mb-[26px]">{data?.name}</p>
            <ul className="flex items-stretch flex-wrap gap-[6px] sm:gap-[8px] mt-auto sm:mt-0">
              {data?.tags.map((tag: string) => (
                <li key={tag} className="border-[1px] border-[#15789d] bg-[#15789d]/20 text-center px-[10px] sm:px-[30px] py-[4px] sm:py-[5px] font-[PoppinsBold] text-[10px] sm:text-sm uppercase">{tag}</li>
              ))}
            </ul>
            <div className="hidden sm:flex items-center mt-auto">
              <Link to={data?.start_url || ''} target="_blank" className="font-[AlimamaShuHeiTiBold] text-lg bg-gradient-to-r from-[#15BFFD] to-[#9C37FD] w-[273px] leading-[54px] h-[54px] rounded-full text-center">立刻开始</Link>
              <ul className="flex items-center space-x-[26px] ml-0 sm:ml-auto brightness-200">
                {data?.links.map((link: any) => (
                  <li key={link.url}><Link target="_blank" className="size-[32px] flex items-center justify-center" to={link.url}><img src={link.icon} className="size-[19px]" alt="" /></Link></li>
                ))}
              </ul>
            </div>
          </div>
          {/* <i className="size-[276px] absolute left-[-100px] bottom-[-150px] bg-[url(/images/vector.png)] bg-no-repeat bg-[length:100%] bg-center"></i> */}
        </div>
      </section>
      <section className="px-[20px] sm:px-0">
        <div className="sm:hidden w-full sm:w-[1200px]">
          <div className="flex flex-col sm:flex-row items-center justify-center">
            <ul className="flex items-center space-x-[30px] mb-[25px] sm:mb-0 ml-0 sm:ml-auto brightness-200">
              {data?.links.map((item: any) => (
                <li key={item.url}><Link to={item.url} target="_blank" className="size-[32px] flex items-center justify-center"><img src={item.icon} className="size-[24px]" alt="" /></Link></li>
              ))}
            </ul>
            <Link to={data?.start_url || ''} target="_blank" className="font-[AlimamaShuHeiTiBold] text-center text-sm sm:text-lg bg-gradient-to-r from-[#15BFFD] to-[#9C37FD] w-full sm:w-[273px] leading-[44px] h-[44px] sm:leading-[54px] sm:h-[54px] rounded-full">立刻开始</Link>
          </div>
        </div>
      </section>

      <section className="px-[20px] sm:px-0">
        <div className="sm:w-[1200px] mx-auto mb-[48px]">
          <Swiper className="!pb-[28px]" modules={[Pagination, Autoplay]} autoplay={{ delay: 3000, disableOnInteraction: false }} pagination={{ type: 'progressbar' }} slidesPerView={(size?.width || 0)> 640 ? 3 : 1} spaceBetween={20}>
            {data?.swiper.map((item: any) => (
              <SwiperSlide key={item.url}>
                <div className="aspect-[416/232] bg-[#141430] max-h-[232px] flex items-center justify-center">
                  <img src={item.url} className="block h-full" alt="" />
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      </section>

      <section className="mb-0 sm:mb-[66px]">
        <div className="sm:w-[1200px] mx-auto">
          <div className="w-full sm:w-[1087px] sm:h-[132px] relative mx-auto flex items-center justify-center mb-[20px] sm:sm:mb-[3px]">
            <p className="font-[AlimamaShuHeiTiBold] uppercase text-[20px] sm:text-[42px] leading-[44px] sm:leading-[100px] relative z-[1]">游戏简介</p>
            <svg xmlns="http://www.w3.org/2000/svg" className="mx-auto select-none w-[100%] aspect-[1087/132] sm:w-[1087px] absolute inset-0">
              <text
                className="stroke-[#381559] stroke-[2px] uppercase text-[40px] sm:text-[99px] font-bold font-[PoppinsBold] fill-[#141430]"
                x="0"
                y="0"
                alignment-baseline="text-before-edge"
                text-anchor="start"
              >
                Game Introduction
              </text>
            </svg>
          </div>
          <p className="sm:w-[956px] mx-auto text-white/90 font-[PoppinsRegular] uppercase text-sm sm:text-[20px] leading-[30px] sm:leading-[53px] pb-[30px] text-center sm:mb-[20px] px-[20px] sm:px-0">{data?.desc}</p>
        </div>
      </section>

      <section className="px-[20px] sm:px-0">
        <div className="sm:w-[1200px] mx-auto">
          <div className="sm:w-[853px] sm:h-[132px] relative mx-auto flex items-center justify-center mb-[30px] sm:mb-[36px]">
            <p className="font-[AlimamaShuHeiTiBold] uppercase text-[20px] sm:text-[42px] leading-[50px] sm:leading-[100px] relative z-[1]">游戏概述</p>
            <svg xmlns="http://www.w3.org/2000/svg" className="mx-auto select-none absolute aspect-[853/132] inset-0">
              <text
                className="stroke-[#381559] stroke-[2px] uppercase text-[44px] sm:text-[99px] font-bold font-[PoppinsBold] fill-[#141430]"
                x="0"
                y="0"
                alignment-baseline="text-before-edge"
                text-anchor="start" 
              >
                Game Overview
              </text>
            </svg>
          </div>
          <ul className="grid grid-cols-1 sm:grid-cols-2 gap-[15px] sm:gap-[40px]">
            {data?.types.map((item: any, index: number) => (
              <li key={index} className="bg-[url(/images/item-bg.png)] bg-no-repeat bg-right-bottom bg-[length:100%_100%] p-[12px] sm:p-[20px] flex">
                <div className="size-[34px] sm:size-[62px] mr-[10px] sm:mr-[18px]">
                  <img src={item.icon} alt="" className="block size-[34px] sm:size-[62px]" />
                </div>
                <div className="flex-1">
                  <p className="font-[AlimamaShuHeiTiBold] text-base sm:text-[24px] sm:leading-[26px] mb-[5px] sm:mb-[10px] text-[#15BFFD]">{item.name}</p>
                  <p className="font-[PoppinsRegular] text-[12px] sm:text-[18px] sm:leading-[30px]">{item.desc}</p>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </section>
    </div>
  )
}

export default GameDetail;